import React, { useEffect } from 'react';
import MainLayout from '@/components/layout/MainLayout';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faHeart,
  faCircleNotch,
  faArrowRight,
  faDumbbell,
  faAppleWhole,
  faMoon,
  faEllipsisVertical,
  faBell,
  faChartLine,
  faPersonRunning,
  faLungs
} from '@fortawesome/free-solid-svg-icons';
import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  return (
    <MainLayout title="HealthHub - 首页">
      {/* 顶部状态栏 */}
      <div className="bg-primary text-white p-4 flex justify-between items-center">
        <div className="flex items-center">
          <span className="font-bold text-xl">HealthHub</span>
        </div>
        <div className="flex items-center space-x-3">
          <FontAwesomeIcon icon={faBell} className="text-xl" />
          <div className="w-8 h-8 rounded-full bg-gray-300 overflow-hidden">
            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&h=100" 
                 alt="用户头像" className="w-full h-full object-cover" />
          </div>
        </div>
      </div>

      {/* 内容区域 */}
      <div className="p-4">
        {/* 健康状态卡片 */}
        <div className="bg-gradient-to-r from-primary to-indigo-600 rounded-xl p-4 text-white mb-6 shadow-md">
          <div className="flex justify-between items-center mb-3">
            <h3 className="font-medium">今日健康状态</h3>
            <FontAwesomeIcon icon={faEllipsisVertical} />
          </div>
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center">
              <div className="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center mr-3">
                <FontAwesomeIcon icon={faHeart} className="text-2xl" />
              </div>
              <div>
                <span className="block text-lg font-bold">72 BPM</span>
                <span className="text-xs opacity-80">心率正常</span>
              </div>
            </div>
            <div className="flex flex-col items-end">
              <div className="flex items-center">
                <span className="text-sm mr-1">血氧</span>
                <span className="font-bold">98%</span>
              </div>
              <div className="flex items-center mt-1">
                <span className="text-sm mr-1">血压</span>
                <span className="font-bold">118/78</span>
              </div>
            </div>
          </div>
          <div className="grid grid-cols-4 gap-2">
            <div className="bg-white/10 p-2 rounded-lg text-center">
              <span className="block text-xs mb-1">步数</span>
              <span className="font-bold">7,342</span>
            </div>
            <div className="bg-white/10 p-2 rounded-lg text-center">
              <span className="block text-xs mb-1">卡路里</span>
              <span className="font-bold">1,248</span>
            </div>
            <div className="bg-white/10 p-2 rounded-lg text-center">
              <span className="block text-xs mb-1">睡眠</span>
              <span className="font-bold">7.5h</span>
            </div>
            <div className="bg-white/10 p-2 rounded-lg text-center">
              <span className="block text-xs mb-1">水分</span>
              <span className="font-bold">1.2L</span>
            </div>
          </div>
        </div>

        {/* 健康目标进度 */}
        <h2 className="text-lg font-semibold mb-3">我的健康目标</h2>
        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-4 mb-5">
          <div className="flex justify-between items-center mb-4">
            <div className="flex items-center">
              <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                <FontAwesomeIcon icon={faPersonRunning} className="text-blue-500" />
              </div>
              <div>
                <h3 className="font-medium">每日活动目标</h3>
                <p className="text-sm text-gray-500">10,000 步</p>
              </div>
            </div>
            <div className="text-right">
              <span className="block font-medium">73%</span>
              <span className="text-sm text-gray-500">已完成 7,342 步</span>
            </div>
          </div>
          <div className="w-full bg-gray-100 rounded-full h-2.5">
            <div className="bg-blue-500 h-2.5 rounded-full" style={{ width: '73%' }}></div>
          </div>
          
          <div className="flex justify-between items-center mt-5 mb-4">
            <div className="flex items-center">
              <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                <FontAwesomeIcon icon={faAppleWhole} className="text-green-500" />
              </div>
              <div>
                <h3 className="font-medium">健康饮食计划</h3>
                <p className="text-sm text-gray-500">每日摄入 2,000 卡路里</p>
              </div>
            </div>
            <div className="text-right">
              <span className="block font-medium">62%</span>
              <span className="text-sm text-gray-500">已摄入 1,248 卡路里</span>
            </div>
          </div>
          <div className="w-full bg-gray-100 rounded-full h-2.5">
            <div className="bg-green-500 h-2.5 rounded-full" style={{ width: '62%' }}></div>
          </div>
          
          <div className="flex justify-between items-center mt-5 mb-4">
            <div className="flex items-center">
              <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                <FontAwesomeIcon icon={faMoon} className="text-purple-500" />
              </div>
              <div>
                <h3 className="font-medium">睡眠质量改善</h3>
                <p className="text-sm text-gray-500">目标 8 小时高质量睡眠</p>
              </div>
            </div>
            <div className="text-right">
              <span className="block font-medium">94%</span>
              <span className="text-sm text-gray-500">昨晚睡眠 7.5 小时</span>
            </div>
          </div>
          <div className="w-full bg-gray-100 rounded-full h-2.5">
            <div className="bg-purple-500 h-2.5 rounded-full" style={{ width: '94%' }}></div>
          </div>
        </div>

        {/* 健康资讯 */}
        <div className="flex justify-between items-center mb-3">
          <h2 className="text-lg font-semibold">健康资讯</h2>
          <button className="text-primary text-sm">查看全部</button>
        </div>
        <div className="grid grid-cols-1 gap-4 mb-6">
          <div className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
            <div className="grid grid-cols-3 h-32">
              <div className="col-span-1">
                <div className="h-32 overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500" 
                       alt="健康饮食" className="w-full h-full object-cover" />
                </div>
              </div>
              <div className="col-span-2 p-3 flex flex-col justify-between">
                <div>
                  <h3 className="font-medium">低碳水饮食真的有效吗？</h3>
                  <p className="text-xs text-gray-500 mt-1 line-clamp-2">营养专家解析低碳水饮食的优缺点，以及如何健康地实践这种饮食方式...</p>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-xs text-gray-400">2小时前</span>
                  <span className="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-600">营养</span>
                </div>
              </div>
            </div>
          </div>
          
          <div className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
            <div className="grid grid-cols-3 h-32">
              <div className="col-span-1">
                <div className="h-32 overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500" 
                       alt="冥想训练" className="w-full h-full object-cover" />
                </div>
              </div>
              <div className="col-span-2 p-3 flex flex-col justify-between">
                <div>
                  <h3 className="font-medium">10分钟冥想练习改善睡眠质量</h3>
                  <p className="text-xs text-gray-500 mt-1 line-clamp-2">专业心理咨询师教你几个简单有效的冥想练习，帮助你放松身心，提高睡眠质量...</p>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-xs text-gray-400">昨天</span>
                  <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 text-purple-600">心理</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 健康工具 */}
        <h2 className="text-lg font-semibold mb-3">健康工具</h2>
        <div className="grid grid-cols-4 gap-3 mb-6">
          <button 
            className="bg-blue-50 p-3 rounded-xl flex flex-col items-center"
            onClick={() => router.push('/data')}
          >
            <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mb-1">
              <FontAwesomeIcon icon={faChartLine} className="text-blue-500" />
            </div>
            <span className="text-xs">健康数据</span>
          </button>
          
          <button 
            className="bg-green-50 p-3 rounded-xl flex flex-col items-center"
            onClick={() => router.push('/plan')}
          >
            <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mb-1">
              <FontAwesomeIcon icon={faDumbbell} className="text-green-500" />
            </div>
            <span className="text-xs">健康计划</span>
          </button>
          
          <button 
            className="bg-purple-50 p-3 rounded-xl flex flex-col items-center"
            onClick={() => router.push('/community')}
          >
            <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mb-1">
              <FontAwesomeIcon icon={faHeart} className="text-purple-500" />
            </div>
            <span className="text-xs">健康社区</span>
          </button>
          
          <button className="bg-red-50 p-3 rounded-xl flex flex-col items-center">
            <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mb-1">
              <FontAwesomeIcon icon={faLungs} className="text-red-500" />
            </div>
            <span className="text-xs">呼吸练习</span>
          </button>
        </div>
      </div>
    </MainLayout>
  );
} 